<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import { getLogList ,getLogCount} from './system'

onMounted(() => {
  setToday()
  handleGetLogLost({
    page: 1,
    limit: 15,
    time: dateValue.value
  })
})
const logCount = ref(0)
const tableData = ref([])
const handleGetLogLost = (data) => {
  getLogList(data)
  .then(res => {
    logCount.value = res.data.data.count
    tableData.value = res.data.data.list.map(item => {
      return {
        ...item,
        latency: (item.latency / 1000000).toFixed(1) + 'ms'
      }
    })
    tableData.value.reverse()
  })
  .catch(err => {
    ElMessage.error(err)
  })
}

const handleChange = (value) => {
  handleGetLogLost({
    page: value,
    limit: 15,
    time: dateValue.value
  })
}

const dateValue = ref('')
const setToday=()=>{
  dateValue.value = new Date().toLocaleDateString().split('/').map(item => {
      return item.length < 2 ? '0' + item : item
    }).join('-')
}
const dateChange = (value) => {
  handleGetLogLost({
    page: 1,
    limit: 15,
    time: dateValue.value
  })   
}
</script>

<template>
  <div class="Log"> 
    <div class="card_hook">
      <el-date-picker v-model="dateValue" type="date" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
        @change="dateChange" style="margin-bottom: 15px;" />
      <el-table :data="tableData" style="width: 100%">
        <!-- 索引 -->
        <!-- <el-table-column type="index" label="序号" width="70" /> -->
        <el-table-column prop="userName" label="用户" />
        <el-table-column prop="time" label="时间" />
        <el-table-column prop="status_code" label="状态" />
        <el-table-column prop="method" label="方式" />
        <el-table-column prop="path" label="路径" />
        <el-table-column prop="ip" label="ip地址" />
        <el-table-column prop="latency" label="耗时" />
      </el-table>
      <el-pagination background layout="prev, pager, next" :page-size="20" :total="logCount" @current-change="handleChange" />
    </div>
  </div>
</template>

<style lang='less' scoped>
.Log {
  width: 100%;
  height: 100%;
  padding: 7px;

  .card_hook {
    height: 100%;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
}
</style>